<template>
  <view>
    <cu-custom bgColor="bg-cyan" isBack>
      <block slot="content">progress进度条</block>
    </cu-custom>
    <!-- 顶部区域 -->
    <view class="smart-page-head">
      <view class="smart-page-head-title">
        progress进度条
      </view>
    </view>
    <view class="smart-padding-wrap">
      <view class="progress-box">
        <progress :percent="pgList[0]" show-info stroke-width="3" active="true"/>
      </view>
      <view class="progress-box">
        <progress :percent="pgList[1]" stroke-width="3" activeColor="#10aeff"/>
      </view>
      <view class="progress-control">
        <button type="primary" @click="setProgress">设置进度</button>
        <button type="warn" @click="clearProgress">清除进度</button>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
      data() {
        return {
          pgList: [0, 0]
        }
      },
      methods: {
        setProgress() {
          this.pgList = [20, 40];
        },
        clearProgress() {
          this.pgList = [0, 0];
        }
      }
    }
</script>

<style>
</style>